DHTML JavaScript Tree samples

Action handlers

This JavaScript tree example illustrates the ability to assign user-defined functions to different event handlers (e.g. Mouse Over, Mouse Out, Check, UnCheck, Select, Deselect). If you try to change a checkbox value, an alert box will appear. Alert box is displayed also when a tree node is selected. Confirm box will pop up if user opens or closes a node.
So, dhtmlxTree allows you to define any functions and attach them to event handlers in order to customize tree behavior. That enriches possibilities for user interaction with JavaScript tree interface.

 

<div id="treeBox" style="width:200;height:200"></div> <script> tree=new dhtmlXTreeObject(document.getElementById('treeBox'),"100%","100%",0); ... tree.setDragHandler(onDrop);//set function object to call on drop tree.setOnClickHandler(onNodeSelect);//set function object to call on node select tree.setOnOpenHandler(aFunc);//set function to call on open/close node tree.setOnCheckHandler(aFunc);//set function to call on open/close node tree.setOnDblClickHandler(aFunc);//set function to call on dbl click </script>
  • Selected node ID will be passed to function specified as argument for setDefaultAction(funcObj)
  • Dropped node ID and new parent node ID will be passed to function specified as argument for setDragFunction(funcObj)
  • node ID will be passed to the function specified as argument for setOpenAction(aFunc)
  • node ID will be passed to the function specified as argument for setDblClickAction(aFunc)


  • Go to the dhtmlxTree main page or Close this page